<template>
	<view class="content">
		<top-bar>
			<template #left>
				<image src="../../static/images/login/back.png" @tap="back" style="width: 44rpx;height: 44rpx;"></image>
			</template>
			<template #center>
				<text></text>
			</template>
			<template #right>
				<view class="">
				</view>
			</template>
		</top-bar>
		<view class="main">
			<view class="logo">
				<image src="../../static/images/index/logo.png" mode=""></image>
			</view>
			<view class="box">
				<view class="title">找回密码</view>
				<view class="ipt_email">
					<input type="text" placeholder-style="color:#aaa" placeholder="输入邮箱" @input="checkEmail"
						v-model="email" name="" />
					<view class="name_img" v-show="email">
						<image src="../../static/images/login/email_R.png" v-if="checkEmail()" mode="">
						</image>
						<image src="../../static/images/login/email_E.png" @tap="email=''" v-else mode="">
						</image>
					</view>
				</view>
				<view class="ipt_validate">
					<input type="text" placeholder-style="color:#aaa" maxlength="6" placeholder="输入6位验证码" name=""
						id="validate" v-model="code" />
					<view :class="{email_force:!checkEmail()}" v-if="!sending" @tap="sendCode">发送验证码</view>
					<view class="email_force" v-else>{{duration}}s</view>
				</view>
				<view class="ipt_email newpwd">
					<input type="text" placeholder-style="color:#aaa" v-model="newPwd" :password="showPwd"
						placeholder="输入新密码" name="" />
					<view class="name_img">
						<image v-if="showPwd" @tap="showPwd=!showPwd" src="../../static/images/login/hidden.png"
							mode="aspectFill"></image>
						<image v-else @tap="showPwd=!showPwd" src="../../static/images/login/show.png"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="update" @tap="updatePwd">
				修改密码
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../commons/js/util.js'
	import TopBar from "../../components/top-bar/top-bar.vue"
	import {
		emailCheckApi,
		validaCodeApi,
		updatePwd,
		getEmailValidateCode
	} from "../../api/register/index.js"
	export default {
		data() {
			return {
				email: "",
				sending: false,
				duration: 60,
				showPwd: true,
				code: "",
				newPwd: ""
			}
		},
		components: {
			TopBar
		},
		methods: {
			checkEmail() {
				return util.checkEmailFormat(this.email);
			},
			back() {
				uni.navigateBack()
			},
			async sendCode() {
				//发送成功才开始倒计时
				let {
					data
				} = await getEmailValidateCode({
					email: this.email
				})
				if (data.status == 200) {
					console.log("发送成功");
					this.sending = true;
					let timer = setInterval(() => {
						this.duration--
						if (this.duration == 0) {
							clearInterval(timer)
							this.sending = false
							this.duration = 5
						}
					}, 1000)
				} else {
					uni.showToast({
						title: "系统繁忙",
						icon: "error",
					})
				}

			},
			async updatePwd() {
				//检查邮箱是否存在，不存在提示注册
				if (!this.checkEmail()) {
					uni.showToast({
						title: "邮箱格式不正确",
						icon: "none",
					})
					return;
				}
				//检查密码长度
				if (this.newPwd.length < 6 || this.newPwd.length > 20) {
					uni.showToast({
						title: "密码长度6-20",
						icon: "none",
					})
					return;
				}

				if (this.code.length != 6) {
					console.log("验证码错误");
					//验证码错误
					uni.showToast({
						title: "验证码错误",
						icon: "none",
					})
					return;
				}
				//检查邮箱是否存在 不存在提示 用户未注册

				let {
					data
				} = await emailCheckApi(this.email)
				//邮箱不存在
				if (data.result == 0) {
					uni.showToast({
						title: "邮箱未注册",
						icon: "none",
					})
					return;
				} else {
					//邮箱已经注册 
					console.log("邮箱存在 先验证验证码是否正确")
					let {
						data
					} = await validaCodeApi({
						code: this.code
					})
					if (data.status == 200) {
						//发送修改密码请求
						console.log("发送修改密码请求");
						let {
							data
						} = await updatePwd({
							email: this.email,
							newPwd: this.newPwd
						})
						if (data.status == 200) {
							uni.showToast({
								title: "密码修改成功",
								icon: "none"
							})
							setTimeout(this.back, 1000)
							return;
						} else {
							console.log("密码修改失败")
							uni.showToast({
								title: "密码修改失败",
								icon: "none",
							})
							return;
						}
					} else {
						//验证码错误
						uni.showToast({
							title: "验证码错误",
							icon: "none",
						})

					}

				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.main {
			height: 85%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 88rpx;

			.logo {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 240rpx;

				image {
					width: 192rpx;
					height: 90rpx;
					;
				}
			}

			.box {
				margin: auto;
				width: 70%;

				.title {
					font-size: 40rpx;
					color: gray;
				}

				.ipt_email {
					margin: 18rpx 0;
					width: 100%;
					position: relative;
					min-width: 350rpx;

					input {
						height: 50rpx;
						margin: 0 8rpx 0 8rpx;
						padding: 8rpx;
						border-bottom: 1px solid #d9dae5;
					}

					.name_img {
						text-align: center;
						height: 40rpx;
						width: 60rpx;
						position: absolute;
						top: 16rpx;
						right: 0;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

				}

				.newpwd {
					flex-direction: row;
				}

				.ipt_validate {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin: 18rpx 0;
					width: 500rpx;

					.email_force {
						color: gray;
						border-color: gray;
						pointer-events: none;
						background: transparent;
					}

					input {
						width: 50%;
						height: 30px;
						margin: 0 10rpx 0 8rpx;
						padding: 4px;
						border-bottom: 1px solid #d9dae5;

					}

					view {
						flex: 1;
						border: 1px solid blue;
						padding: 20rpx 0 20rpx 0;
						font-size: 26rpx;
						border-radius: 12rpx;
						text-align: center;
						color: white;
						background-color: #4768f3;
					}
				}

			}

			.update {
				width: 480rpx;
				text-align: center;
				padding: 20rpx;
				border-radius: 10rpx;
				background: #4768f3;
				color: white;
			}
		}
	}
</style>